<template>
  <view class="address">
    <view class="addressList">
      <view class="addressItem" :class="{ defaultAddress: item.is_default }" 
      @tap="go('/pages/uCenter/address/edit?id=' + item.id)" v-for="(item, index) in lists" :key="index">
        <view class="addressIcon"><ly-avatar :src="IMAGES.ADDRESS.ICON_01" size="100rpx"></ly-avatar></view>
        <view class="addressInfo">
          <view class="userinfo">
            <text class="username">{{ item.name }}</text>
            <text class="mobile">{{ item.mobile }}</text>
          </view>
          <text class="longAddress">{{ item.long_address }}</text>
        </view>
        <view class="addressAction">
          <button class="btn" @tap.stop="onClickDel(index)"><text class="btnText">删 除</text></button>
        </view>
        <image v-if="item.is_default" class="defaultAddressBorder" :src="IMAGES.ADDRESS.BORDER_DEFAULT"></image>
      </view>
    </view>
  </view>
</template>

<script>
import { IMAGES } from "@/config/resources";
import uniApp from "@/utils/uni-app";
import LyAvatar from "@/lyui/ly-avatar/avatar";
export default {
  components: {
    LyAvatar
  },
  data() {
    return {
      lists: []
    };
  },
  computed: {
    IMAGES: () => IMAGES
  },
  onShow() {
    this.init();
  },
  methods: {
    init() {
      this.$api.user.address().then(_ => {
        this.lists = _.data.data;
      });
    },
    onClickDel(index) {
      this.$api.user
        .delAddress(this.lists[index].id)
        .then(_ => {
          uniApp.toast("删除成功");
          this.lists.splice(index, 1);
        })
        .catch(e => {
          uniApp.alert(e.message || e.data.msg || "删除失败");
        });
    }
  },
  onNavigationBarButtonTap(e) {
    if (e.index === 0) {
      this.go("/pages/uCenter/address/edit");
    }
  }
};
</script>

<style lang="scss" scoped>
.address {
  height: 100%;
  width: 100%;
}
.addressList {
  width: 750rpx;
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.addressItem {
  width: 750rpx;
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 20rpx 20rpx;
  position: relative;
  background-color: #FFFFFF;
}
.defaultAddress{
  margin-bottom: 50rpx;
}
.defaultAddressBorder{
  position: absolute;
  height: 8rpx;
  width: 750rpx;
  bottom: 0;
  left: 0;
}
.addressIcon {
  width: 120rpx;
  height: 120rpx;
  overflow: hidden;
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  justify-content: center;
  align-items: center;
}
.addressInfo {
  padding-left: 20rpx;
  width: 510rpx;
  color: #3c3c3c;
}

.addressAction {
  width: 120rpx;
}

.userinfo{
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
}
.username{
  margin-right: 10rpx;
  font-size: 32rpx;
}
.mobile{
  font-size: 24rpx;
  color: #555555;
}
.longAddress{
  font-size: 24rpx;
  color: #555555;
}

.btn {
  width: 120rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 2500rpx;
  background-color: #ff7b05;
  font-size: 20rpx;
  &:after {
    border: none;
  }
}
.btnText {
  font-size: 20rpx;
  color: #ffffff;
}
</style>
